@import '../../style/color.scss';
@import '../../style/font.scss';

.side-menu-wrapper {

  .side-menu-item {
    text-align: center;
    cursor: pointer;

    .item {
      display: inline-block;
      width: 76px;
      height: 72px;
    }

    .home-icon {
      background: url('../../../images/sidemenu/icon_home.png');
    }

    .display-icon {
      background: url('../../../images/sidemenu/icon_display_selected.png');
    }

    .server-icon {
      background: url('../../../images/sidemenu/icon_server_selected.png');
    }

    .interactive-icon {
      background: url('../../../images/sidemenu/icon_interactive_selected.png');
    }

    .label {
      font-family: $DFYuanW7-GBK;
      font-size: 20px;
      color: $un-active-font-color;
      width: 100%;
    }
  }

  .side-menu-item:first-child {
    margin-top: 112px;
  }

  .side-menu-item:not(:first-child) {
    margin-top: 124px;
  }

  .side-menu-item:hover, .selected-menu-item {
    .label {
      color: $form-font-color;
    }
  }
}
@media screen and (max-width: 1919px) {
  .side-menu-wrapper {

    .side-menu-item {
      text-align: center;
      cursor: pointer;

      .item {
        display: inline-block;
        width: 46px;
        height: 43px;
      }

      .home-icon {
        background: url('../../../images/sidemenu/icon_home.png');
        background-size: 46px 43px;
      }

      .display-icon {
        background: url('../../../images/sidemenu/icon_display_selected.png');
        background-size: 46px 43px;
      }

      .server-icon {
        background: url('../../../images/sidemenu/icon_server_selected.png');
        background-size: 46px 43px;
      }

      .interactive-icon {
        background: url('../../../images/sidemenu/icon_interactive_selected.png');
        background-size: 46px 43px;
      }

      .label {
        font-family: $DFYuanW7-GBK;
        font-size: 16px;
        color: #CCCCCC;
        letter-spacing: 0;

      }
    }

    .side-menu-item:first-child {
      margin-top: 83px;
    }

    .side-menu-item:not(:first-child) {
      margin-top: 85px;
    }

    .side-menu-item:hover, .selected-menu-item {
      .label {
        color: $form-font-color;
      }
    }
  }
}
